<script>
import Header from "@/views/Components/Header/header.vue";
import Header1 from "@/views/Components/Header/header1.vue";
import Footer from "@/views/Components/Footer/footer.vue";
import { getUserCollect, cancelCollect } from "@/api/collect/CollectService";
export default {
    computed: {
    },
    components: {
        Header,
        Header1,
        Footer
    },
    data() {
        return {
            num: 1,
            contain: [
                "我的商品收藏,My Favorite!","","",""
            ],
            grid: "1.5fr 3.5fr 1.5fr 1.5fr 1.5fr 7fr",
            collectData: [],
            multipleSelection: [],
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        async operationCollect(ids) {
            await fetch("http://localhost:3310/collect", {
                method: "DELETE",
                headers: {
                    "Authorization": this.$store.getters.token,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(ids)
            })
                .then(res => res.json())
                .then(res => {
                    console.log(res);
                    if(res.code === 200) {
                        this.$message.success("取消收藏成功!");
                        this.initCollect();
                    } else {
                        this.$message.error(res.message);
                    }
                })
        },
        /**
         * 取消收藏
         * @param val
         * @returns {Promise<void>}
         */
        async cancelCollect(val) {
            const ids = [val.id]
            await this.operationCollect(ids);
        },
        async initCollect(options) {
            let res = await getUserCollect();
            this.collectData = JSON.parse(JSON.stringify(res.data));
            console.log(res);
            this.$loading(options).close();
        },
        async cancelAll() {
            const ids = [];
            //console.log(this.multipleSelection);
            this.multipleSelection.forEach(val => {
                ids.push(val.id);
            })
            console.log(ids);
            await this.operationCollect(ids);
        }
    },
    created() {
        this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.99)"
        });
        this.initCollect();
    }
}
</script>

<template>
<!--收藏界面-->
    <div id="CollectApp">
        <Header></Header>
        <Header1 :contain="contain" fS="20px" :grid="grid"></Header1>
        <div class="Favorite">
            <div class="F_contain">
                <el-table
                    max-height="540"
                    ref="multipleTable"
                    :data="collectData"
                    tooltip-effect="dark"
                    style="width: 100%;font-size: 15px"
                    stripe
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="bookId"
                        label="编号"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="商品名称"
                        width="250">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="price"
                        label="商品价格"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="cover"
                        label="商品图片"
                        width="150">
                        <template slot-scope="scope">
                            <el-image style="width: 70px; height: 70px" :src="scope.row.cover" :preview-src-list="[scope.row.cover]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="description"
                        label="商品简介"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button  style="transform: scale(0.8)" type="warning" round @click="cancelCollect(scope.row)">取消收藏</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="cancelAll" type="danger" style="margin-left: 40px;margin-top: 20px">批量取消收藏</el-button>
            </div>
        </div>
        <Footer FHeight="0" PTop1="0" PTop2="50px"></Footer>
    </div>
</template>

<style scoped lang="scss">
@import url(../../assets/css/collect.css);
</style>
